<template>
  <div id="detail">
    <detail-nav-bar ref="navbar" @titleClick="titleClick" />
    <scroll
      class="wrapper"
      ref="scroll"
      @scroll="wrapperScroll"
      :probe-type="2"
    >
      <detail-swiper :top-images="topImages" v-if="topImages != ''" />
      <detail-base-info :goodsInfo="goodsInfo" />
      <detail-shop-info :shopInfo="shopInfo" />
      <detail-goods-info
        ref="detailInfo"
        :detailInfo="detailInfo"
        @imgLoad="imgLoad"
      />
      <detail-params-info :paramsInfo="paramsInfo" ref="params" />
      <detail-appraise-info :appraiseInfo="appraiseInfo" ref="appraise" />
      <goods-list :goodsList="recommendInfo" ref="recommend" />
    </scroll>
    <detail-tool-bar @addCart="addCart" />
    <back-top @click.native="backClick" v-show="isShowBackTop" />
  </div>
</template>

<script>
import {
  getDetail,
  getRecommend,
  GoodsInfo,
  ShopInfo,
  ParamsInfo,
} from "network/detail";

import Scroll from "components/commom/scroll/Scroll";
import BackTop from "components/content/backTop/BackTop";

import { debounce } from "lodash";

import DetailNavBar from "./child/DetailNavBar";
import DetailSwiper from "./child/DetailSwiper";
import DetailBaseInfo from "./child/DetailBaseInfo";
import DetailShopInfo from "./child/DetailShopInfo";
import DetailGoodsInfo from "./child/DetailGoodsInfo";
import DetailParamsInfo from "./child/DetailParamsInfo";
import DetailAppraiseInfo from "./child/DetailAppraiseInfo";
import DetailToolBar from "./child/DetailToolBar";
import GoodsList from "components/content/goods/GoodsList";
export default {
  name: "Detail",
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll,
    DetailGoodsInfo,
    DetailParamsInfo,
    DetailAppraiseInfo,
    GoodsList,
    DetailToolBar,
    BackTop,
  },
  data() {
    return {
      iid: null,
      topImages: [], // 轮播图
      goodsInfo: {}, // 商品信息
      shopInfo: {}, // 店铺信息
      detailInfo: {}, // 详情图信息
      paramsInfo: {}, // 参数信息
      appraiseInfo: {}, // 评价信息
      recommendInfo: {}, // 商品推荐信息
      topNavYs: [], // 定义顶部导航对应的组件的offsetTop
      getTopNavY: null, //防抖回调
      currentIndex: 0, // navbar滚动当前标题
      isShowBackTop: false, // 默认回到顶部 不显示
    };
  },
  created() {
    // 获取到url后面的id
    this.iid = this.$route.query.iid;
    getDetail(this.iid).then((res) => {
      const data = res.result;
      console.log(data);
      // 保存轮播图数据
      this.topImages = data.itemInfo.topImages; // 轮播图图片
      // 保存商品数据（通过构造函数）
      this.goodsInfo = new GoodsInfo(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      // 保存店铺数据（通过构造函数）
      this.shopInfo = new ShopInfo(data.shopInfo);
      // 保存详情图数据
      this.detailInfo = data.detailInfo;
      // 尺码参数数据（通过构造函数）
      this.paramsInfo = new ParamsInfo(
        data.itemParams.rule,
        data.itemParams.info
      );
      // 保存评价数据
      this.appraiseInfo = data.rate;
    });
    getRecommend().then((res) => {
      this.recommendInfo = res.data.list;
    });

    // this.getTopNavY = debounce(() => {
    //   // 等图片每次更新加载完成后重新保存
    //   this.topNavYs = [];
    //   this.topNavYs.push(0); //商品的offsetTop
    //   this.topNavYs.push(this.$refs.params.$el.offsetTop - 44); // 参数的offsetTop
    //   this.topNavYs.push(this.$refs.appraise.$el.offsetTop - 44); // 评论的offsetTop
    //   this.topNavYs.push(this.$refs.recommend.$el.offsetTop - 44); // 推荐的offsetTop
    // }, 1000);
    this.getTopNavY = debounce(() => {
      // 加上if判断，先判断是否存在，否则不执行，不然会报错
      if (this.$refs.params && this.$refs.appraise && this.$refs.recommend) {
        // this.$nextTick(() => {
        // 等图片每次更新加载完成后重新保存
        this.topNavYs = [];
        this.topNavYs.push(0); //商品的offsetTop
        this.topNavYs.push(this.$refs.params.$el.offsetTop - 44); // 参数的offsetTop
        this.topNavYs.push(this.$refs.appraise.$el.offsetTop - 44); // 评论的offsetTop
        this.topNavYs.push(this.$refs.recommend.$el.offsetTop - 44); // 推荐的offsetTop
        // });
      }
    }, 500);
  },
  methods: {
    imgLoad() {
      // 重新计算高度
      this.$refs.scroll.scroll.refresh();
      this.getTopNavY();
    },
    titleClick(index) {
      this.$refs.scroll.scrollTo(0, -this.topNavYs[index], 200);
    },
    // 滚动事件
    wrapperScroll(position) {
      const posY = -position.y;
      let length = this.topNavYs.length;
      for (let i = 0; i < length; i++) {
        if (i == length - 1 && posY >= this.topNavYs[i]) {
          this.currentIndex = i;
        } else if (this.topNavYs[i] <= posY && posY <= this.topNavYs[i + 1]) {
          this.currentIndex = i;
        }
      }
      this.$refs.navbar.currentIndex = this.currentIndex;
      this.isShowBackTop = position.y < -350;
    },
    backClick() {
      this.$refs.scroll.scrollTo(0, 0);
    },
    addCart() {
      // 1. 获取用户点击的商品信息传给购物车页面
      const product = {
        img: this.topImages[0], // 轮播图第一张图片
        title: this.goodsInfo.title,
        desc: this.detailInfo.desc,
        lowNowPrice: this.goodsInfo.lowNowPrice,
        iid: this.iid,
        count: 1, // 加购数量，默认1
        checked: false, // 记录是否选中，默认否
      };

      // 2.添加
      // this.$store.commit("addCart", product);
      this.$store.dispatch("addCart", product).then((res) => {
        console.log(res);
        this.$toast.show(res, 2000);
      });
    },
  },
};
</script>
<style scoped lang="less">
#detail {
  position: relative;
  z-index: 9;
  background-color: #fff;
  .nav-bar {
    z-index: 9;
    background-color: #fff;
  }
  .wrapper {
    height: calc(100vh - 44px - 60px);
    overflow: hidden;
  }
}
</style>
